<template>
  <div class="base_page">
    <el-scrollbar class="el_scroll">
      <div class="info_list" v-if="!isEdit">

        <div class="cell">
          <div class="name required">姓名：</div>
          <div class="txt">{{baseInfo.name||''}}</div>
        </div>

        <div class="cell">
          <div class="name required">性别：</div>
          <div class="txt">{{baseInfo.gender}}</div>
        </div>

        <div class="cell">
          <div class="name">年龄：</div>
          <div class="txt">{{baseInfo.age}}岁</div>
        </div>

        <div class="cell">
          <div class="name">手机号：</div>
          <div class="txt">{{baseInfo.phone}}</div>
        </div>

        <div class="cell">
          <div class="name">微信号：</div>
          <div class="txt">{{baseInfo.wxAccount}}</div>
        </div>

        <div class="cell">
          <div class="name">是否加微信：</div>
          <div class="txt">{{baseInfo.wxAdd}}</div>
        </div>

        <div class="cell">
          <div class="name">微信标签：</div>
          <div class="txt">{{baseInfo.wxTag}}</div>
        </div>

        <div class="cell">
          <div class="name">微信备注名：</div>
          <div class="txt">{{baseInfo.wxRemark}}</div>
        </div>

        <div class="cell">
          <div class="name required">城市：</div>
          <div class="txt">{{baseInfo.cityName}}</div>
        </div>

        <div class="cell">
          <div class="name required">报名项目：</div>
          <div class="txt">{{baseInfo.enrollProjectNames}}</div>
        </div>

        <div class="cell">
          <div class="name required">报名费：</div>
          <div class="txt">{{baseInfo.enrollFee}}元</div>
        </div>

        <div class="cell">
          <div class="name">所在位置：</div>
          <div class="txt">{{baseInfo.address}}</div>
        </div>

        <div class="cell">
          <div class="name required">报名时间：</div>
          <div class="txt">{{baseInfo.enrollTime}}</div>
        </div>

        <div class="cell">
          <div class="name required">负责人：</div>
          <div class="txt">{{baseInfo.principalNames}}</div>
        </div>

        <div class="cell">
          <div class="name required">广告来源：</div>
          <div class="txt">{{baseInfo.channelSourceName}}</div>
        </div>

        <div class="cell">
          <div class="name">广告代号：</div>
          <div class="txt">{{baseInfo.adSourceName}}</div>
        </div>

        <div class="cell">
          <div class="name">信息收集：</div>
          <div class="txt">{{baseInfo.collectInfo}}</div>
        </div>

        <div class="cell">
          <div class="name">更多备注：</div>
          <div class="txt">{{baseInfo.remark}}</div>
        </div>

      </div>

      <!-- 编辑 信息 开始 -->
      <div class="" v-if="isEdit">
        <add-customer ref="AddCustomerCom" :id="baseInfo.id" v-if="isEdit" @change="onChange"></add-customer>
      </div>
      <!-- 编辑 信息 end -->

      <!-- 按钮组 开始 -->
      <div class="btn_group" :class="isEdit?'edit_btn_group':''">
        <el-button type="primary" size="small" @click="editCustomer" v-if="!isEdit">编辑</el-button>
        <template v-else>
          <el-button type="primary" :loading="loading" size="small" @click="saveInfo">保存</el-button>
          <el-button type="default" size="small" @click="isEdit = false">取消</el-button>
        </template>
      </div>
      <!-- 按钮组 end -->
    </el-scrollbar>

  </div>
</template>
<script>
import { broadcast } from "@/common/util";
import AddCustomer from "./add";
import { GETCUSTOMERINFO } from "@/http/customer";
export default {
  name: "BaseInfo",
  components: {
    AddCustomer,
  },
  props: {
    userInfo: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      baseInfo: {},
      isEdit: false,
      loading: false,
    };
  },
  watch: {
    userInfo: {
      handler: function (e) {
        if (e.baseInfo) {
          this.baseInfo = e.baseInfo;
        }
      },
      immediate: true,
    },
  },
  mounted() {
    console.log(this.userInfo);
  },
  methods: {
    // 编辑用户
    editCustomer() {
      this.isEdit = true;
      //broadcast("customer.add", { id: this.baseInfo.id });
    },

    // 保存数据
    saveInfo() {
      this.loading = true;
      this.$refs.AddCustomerCom.saveInfo();
    },

    // 监听新增
    onChange(e) {
      this.loading = false;
      console.log(e);
      if (e) {
        this.isEdit = false;
        this.getInfo();
        // this.$emit("change", true);
        broadcast("customer.add.success");
      }
    },

    // 获取详情
    getInfo() {
      let _this = this;
      let oParams = { id: _this.baseInfo.id };
      GETCUSTOMERINFO(oParams).then((res) => {
        let obj = res.data || {};
        //_this.userInfo = obj;
        _this.baseInfo = obj.baseInfo ? obj.baseInfo : {};
      });
    },
  },
};
</script>
<style lang="scss">
.el_scroll {
  .el-scrollbar__wrap {
    height: 100vh;
    overflow-x: hidden;
  }
}
</style>
<style lang="scss" scoped>
.base_page {
  min-height: 360px;
  .el_scroll {
    padding-bottom: 16px;
    ::v-deep .el-scrollbar__wrap {
      // max-height: 100vh;
      overflow-x: hidden;
    }
  }
}
.info_list {
  display: flex;
  flex-wrap: wrap;
  .cell {
    flex: 0 0 33%;
    display: flex;
    margin: 16px 0;
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #323233;
    .name {
      flex-shrink: 0;
      padding: 0 0 0 10px;
    }
    .required {
      position: relative;
    }
    .required:after {
      display: block;
      content: "*";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      color: #f00;
    }
    .txt {
      padding: 0 10px 0 0;
    }
  }
}
.edit_btn_group {
  padding-left: 120px;
}
</style>